<template>
  <div class="icons">
    <swiper>
        <swiper-slide v-for="(item, index) of pages" :key="index">
            <div class="icon" v-for="itempage of item" :key="itempage.id">
                <div class="icon-img">
                    <img class="icon-img-content" :src="itempage.imgUrl"/>
                </div>
                <p class="icon-desc">{{itempage.desc}}</p>
            </div>
        </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "HomeIcons",
  data(){
      return {
          iconList:[{
              id:'0001',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'景点门票'
          },{
              id:'0002',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'滑雪季'
          },{
              id:'0003',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'泡温泉'
          },{
              id:'0004',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'动物园'
          },{
              id:'0005',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'植物园'
          },{
              id:'0006',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'一日游'
          },{
              id:'0007',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'京东'
          },{
              id:'0008',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'天猫'
          },{
              id:'0009',
              imgUrl:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',
              desc:'拼多多'
          }]
      }
  },
  computed:{
      pages(){
          const pages = [];
          this.iconList.forEach((item,index)=>{
              const page = Math.floor(index/8)
              if(!pages[page]){
                  pages[page] = [];
              }
              pages[page].push(item)
          })
          return pages;
      }
  }
};
</script>
<style lang="stylus" scoped>
@import "~@/assets/styles/varibles.styl";
@import "~@/assets/styles/mixins.styl";
.icons >>> .swiper-container
    height: 0;
    padding-bottom: 50%;    
.icons
    margin-top .2rem
    .icon 
        float: left;
        width: 25%;
        height 0
        position relative
        overflow: hidden;
        padding-bottom: 25%;
        .icon-img
            position absolute
            top 0
            left 0
            bottom 0.44rem
            right 0
            box-sizing border-box
            padding .1rem
            .icon-img-content
                height 100%
                display block
                margin 0 auto
        .icon-desc
            position absolute
            bottom 0
            left 0
            right 0
            line-height .44rem
            height .44rem
            text-align center
            ellipsis()
            color $darkTextColor

</style>